<template>
  <div class="nav">
    <div class="nav-breadcrumb">
      <router-link to="/index">
        <span>首页</span>
        <span class="slant">/</span>
      </router-link>
      <router-link v-for="(item,index) in ele"
                   :key="index"
                   :to="item.path">
        <span>{{ item.name }}</span>
        <span class="slant">/</span>
      </router-link>
      <span class="last-ele">{{ lastEle.name }}</span>
    </div>
    <div class="refresh"
         title="刷新">
      <span class="iconfont icon-test182"></span>
    </div>
  </div>
</template>
<script>
export default {
  created () {
    this.setValue()
  },
  props: ['msg'],
  data () {
    return {
      ele: Array,
      lastEle: Object
    }
  },
  methods: {
    setValue () {
      this.lastEle = this.msg.pop()
      this.ele = this.msg
      // console.log(this.msg)
    }
  }
}
</script>
<style lang="scss" scoped>
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 14px;
  height: 50px;
  color: #999;
  background-color: #f2f5f7;
  .nav-breadcrumb {
    display: flex;
    a {
      color: #999;
      &:hover {
        color: #20bdeb;
      }
    }
    span {
      padding-right: 12px;
    }
    .last-ele {
      color: #333;
      cursor: pointer;
    }
  }
  .refresh {
    border: 1px solid #dce4e7;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    transform: rotateX(180deg);
    /deep/ .icon-test182 {
      display: inline-block;
      color: #b3b3b3;
      transform: rotate(90deg);
      font-weight: 600;
      line-height: 24px;
    }
    &:hover {
      background-color: #e6edf1;
    }
  }
}
</style>
